<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<link  rel="stylesheet" href="../css/counter.css"/>
		<link rel="stylesheet" href="../css/star.css"/>
	</head>
	<body>
		<div id='app'>
			<my-counter :value='1' :min='0':max='10'></my-counter>
			<my-counter @update:value='update'></my-counter>
			<my-counter></my-counter>
			<my-star :value='5'></my-star>
			{{r1}}
			<my-star :value='3'></my-star>
			<my-star></my-star>
		</div>
		<script src="../js/counter.js"></script>
		<script src="../js/star.js"></script>
		<script>
			Vue.createApp({
				components:{
					'my-counter':Counter,
					'my-star':Star
				},
				data(){
					return{
						r1:5
					}
				},
				methods:{
					update(value){
						alert(value)
					}
				}
				
			}).mount('#app')
		</script>
	</body>
</html>